<template>

	<view class="content" >
		
		<view class="" v-if="zhiBo.length">
			<block v-for="(item,index) in zhiBo" :key="index">
				<view class=""   style="border-radius: 20rpx;height: 150rpx;background-color: #fff;width: 100%;position: relative;display: flex;align-items: center;padding: 0 20rpx;">
					<view class="" style="height: 100rpx; width: 100rpx;display: flex;">
						<image style="height: 100%;width: 100%;border-radius: 50%;" src="https://llkj-wechat.oss-cn-hangzhou.aliyuncs.com/images/202311/9e3836354a76be0f94e1892687b53e52.png" mode=""></image>
					</view>
					<view class="latel" style="flex: 1;margin-left: 20rpx;font-size: 40rpx;">
						{{item.title||item.name}}
					</view>
					<view class="" v-if="item.status==2"  @click="getOpen(item)" style="background-color: #E1265D;display: flex;align-items: center;border-radius: 12rpx;padding: 0 30rpx;">
						<image style="height: 40rpx;width: 40rpx;margin-right: 10rpx;" src="../../static/live.png" mode=""></image>
						<text  style="height: 70rpx;line-height: 70rpx;color: #fff;font-size: 36rpx;">直播中</text>	
					</view>
					<view class="" v-if="item.status==3"   @click="getOpen(item)" style="background-color: #E1265D;display: flex;align-items: center;border-radius: 12rpx;padding: 0 30rpx;">
						<!-- <image style="height: 40rpx;width: 40rpx;margin-right: 10rpx;" src="../../static/live.png" mode=""></image> -->
						<text  style="height: 70rpx;line-height: 70rpx;color: #fff;font-size: 36rpx;">查看回放</text>	
						
					</view>
				</view>
			</block> 
		</view>
		<swiper v-if="reservationList.length"  style="height: 150rpx;background-color: #fff;border-radius: 20rpx;overflow: hidden;" class="swiper" circular  :autoplay="true" :interval="5000" :vertical='true'
						:duration="1000">
						<swiper-item  v-for="(item,index) in reservationList" :key="index">
							<view class=""   style="height: 150rpx;background-color: #fff;width: 100%;position: relative;display: flex;align-items: center;padding: 0 20rpx;">
								<view class="" style="height: 100rpx; width: 100rpx;display: flex;">
									<image style="height: 100%;width: 100%;border-radius: 50%;" src="https://llkj-wechat.oss-cn-hangzhou.aliyuncs.com/images/202311/9e3836354a76be0f94e1892687b53e52.png" mode=""></image>
								</view>
								<view class="" style="flex: 1;margin-left: 20rpx;font-size: 40rpx;">
									{{item.nickname}}
								</view>
								<view v-if="!isyuyue" class="" @click="openReservation(item)" style="background-color: #E1265D;display: flex;align-items: center;border-radius: 12rpx;padding: 0 30rpx;">
									<image style="height: 40rpx;width: 40rpx;margin-right: 10rpx;" src="../../static/live.png" mode=""></image>
									<text style="height: 70rpx;line-height: 70rpx;color: #fff;font-size: 36rpx;">预约</text>	
								</view>
								<view v-else class="" @click="openReservation(item)" style="background-color: #E1265D;display: flex;align-items: center;border-radius: 12rpx;padding: 0 30rpx;">
								
									<text style="height: 70rpx;line-height: 70rpx;color: #fff;font-size: 36rpx;">已预约</text>	
								</view>
							</view>
						</swiper-item>
						
				<!-- 		<swiper-item>
							<view class=""   style="height: 150rpx;background-color: #fff;width: 100%;position: relative;display: flex;align-items: center;padding: 0 20rpx;">
								<view class="" style="height: 100rpx; width: 100rpx;display: flex;">
									<image style="height: 100%;width: 100%;border-radius: 50%;" src="https://llkj-wechat.oss-cn-hangzhou.aliyuncs.com/images/202311/9e3836354a76be0f94e1892687b53e52.png" mode=""></image>
								</view>
								<view class="" style="flex: 1;margin-left: 20rpx;font-size: 40rpx;">
									{{list.name}}
								</view>
								<view class="" style="background-color: #E1265D;display: flex;align-items: center;border-radius: 12rpx;padding: 0 30rpx;">
								
									<text style="height: 70rpx;line-height: 70rpx;color: #fff;font-size: 36rpx;">立即预约</text>	
								</view>
							</view>
						</swiper-item> -->
					
					</swiper>
				
	</view>
</template>

<script>
	import {getScene} from "@/plugins/utils.js" 
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		loGetLocation
	} from '@/config/common';
	export default {
		components: {
		
		},
		computed: {
			...mapState(['PrimaryColor', `userInfo`]),
			freeSpecsButtonBackground() {
				return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor), 0.75)
			},
		},
		data() {
			return {
				// 直播列表
				zhiBo:[],
				// 预约列表
				reservationList:[],
				isyuyue:false,
			}
		},
		watch: {
			// //数据改变请求接口
			userInfo: {
				handler: function() {
					//请求接口
					if (this.userInfo.exhibitionBox && this.is_enabled) {
						this.activity_show = true
						this.getAddReceive()
						this.userInfo.exhibitionBox = false
						this.setUserInfo(this.userInfo)
					}
				},
				deep: true
			}

		},
		
	props:{
		
			list:{
			    type:Object,
			    default:{},
			},
		
		},
	
		 mounted(e) {
		// this.getbutler()
		let that = this
		// 直播处理
		if(!this.list.is_show){
			return
		}
		wx.getChannelsLiveInfo({
			finderUserName:that.list.video_id,
			success:function(res){
				console.log(res);
				// 直播中的这个只展示一个直播就完了
				if(res.status==2){
					let obj = JSON.parse(JSON.stringify(that.list))
					let arr = []
					obj.finderUserName=that.list.video_id
					obj.feedId=res.feedId
					obj.nonceId=res.nonceId
					obj.status = res.status
					obj.title = res.description
					arr[0] = obj
					that.zhiBo=arr
				}else if(res.status==3&&that.list.history_status){
					// let obj = JSON.parse(JSON.stringify(that.list))
					// let arr = []
					// obj.feedId=res.feedId
					// obj.nonceId=res.nonceId
					// obj.status = res.status
					// obj.title = res.description
					// arr[0] = obj
					// that.zhiBo=arr
				}
				else{
					that.zhiBo = []
				}
				
			},
				fail:function(res){
					
				}
		})
		console.log(this.zhiBo,123,this.list.history_status);
		if(this.zhiBo.length){
			console.log('jinlaila');
			return
		}else{
			wx.getChannelsLiveNoticeInfo({
				finderUserName:that.list.video_id,
				success:function(res){
					console.log(res,'yuyue');
					if(res.status==0){
						let obj = {
							noticeId:res.noticeId,
							nickname:res.nickname
						}
						that.reservationList.push(obj)
						that.reservationList = [...that.reservationList,...res.otherInfos]
					
						 // that.reservationList =[...that.reservationList,...res.otherInfos]
						
					}
				
				}
			})
		}
		
	
		},
	

		methods: {
		// 打开主页回放
		openHistory(item){
			wx.openChannelsActivity({
				finderUserName:item.finderUserName,
				feedId:item.feedId,
				success:function(res){
					
				},
				fail:function(res){
						
				},
			})
		},
	// 打开直播
	getOpen(item){
		console.log(item);
		wx.vibrateShort();
		wx.openChannelsLive({
			finderUserName:item.finderUserName,
			feedId:item.feedId,
			nonceId:item.nonceId,
			success:function(res){
				
			},
			fail:function(res){
				
			},
		})
		
	},
	// 打开预约视频
	openReservation(item){
		wx.vibrateShort();
		let that = this
		wx.reserveChannelsLive({
			noticeId:item.noticeId,
			success:function(res){
				console.log(res);
				that.isyuyue = true
			},
		})
	},
		// 视频号处理
		getbutler(){
						let arr = [...this.list]
						let arr1 =[]
						this.list.forEach(v=>{
							if(v.is_show){
								// 预约处理
								wx.getChannelsLiveNoticeInfo({
									finderUserName:v.video_id,
									success:function(res){
										if(res.otherInfos.length){
											arr1=[...arr1,...res.otherInfos]
										}
									
									}
								})
								// 直播处理
								wx.getChannelsLiveInfo({
									finderUserName:v.video_id,
									success:function(res){
										v.feedId=res.feedId
										v.nonceId=res.nonceId
										v.type = res.status
									}
								})
							}
							
									
						})
						let that = this
						let myarr = []
						arr.forEach(v=>{
								
							if(v.is_show=='1'&&v.history_status){
								myarr.push(v)
							}
						})			
						
						this.butler = [...myarr]
						setTimeout(function() {
							that.reservationList = arr1
						}, 2000);
			
				
		},
	

		


		
		
	
	},
}
</script>

<style lang="scss" scoped>
	.box{
		display: flex;
	}
	.leftbox{
		width: 340rpx;
		height: 560rpx;
		display: flex;
		image{
			height: 100%;
			width: 100%;
			border-radius: 12rpx;
		}
	}
	.rightbox{
		width: 350rpx;
		height: 560rpx;
		margin-left: 20rpx;
		.top_r{
			height: 220rpx;
			width: 100%;
			display: flex;
			image{
				height: 100%;
				width: 100%;
				border-radius: 12rpx;
			}
		}
		.bottom_r{
			margin-top: 20rpx;
			height: 320rpx;
			width: 100%;
			display: flex;
			image{
				height: 100%;
				width: 100%;
				border-radius: 12rpx;
			}
		}
	}
	.latel{
		
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
</style>